<template>
  <div class="reportFormPage">
    <TopOperation ref="TopOperation" :tabs-list="tabList" :active-val.sync="activeVal" @currentActive="currentActive"
      @reportFormsSubmit="reportFormsSubmit" @printSpecificPart="onPrintSpecificPart" />
    <div ref="printView" v-loading="modPagesLodding">
      <div v-show="activeVal === 'wdclzdgmd'" v-for="(item, index) in excelTypeMap['wdclzdgmd']"
        :key="'wdclzdgmd' + index">
        <wdclzdgmd ref="wdclzdgmd" :excel-id="item" :page="index" :syType="form.syType" />
      </div>
      <div v-show="activeVal === 'wdclzdgmdbg'" v-for="(item, index) in excelTypeMap['wdclzdgmdbg']"
        :key="'wdclzdgmdbg' + index">
        <wdclzdgmdbg ref="wdclzdgmdbg" :excel-id="item" :page="index" :syType="form.syType" />
      </div>
      <div v-show="activeVal === 'wdcljsjc'" v-for="(item, index) in excelTypeMap['wdcljsjc']"
        :key="'wdcljsjc' + index">
        <wdcljsjc ref="wdcljsjc" :excel-id="item" :page="index" :syType="form.syType" />
      </div>
      <div v-show="activeVal === 'wdcljsbg'" v-for="(item, index) in excelTypeMap['wdcljsbg']"
        :key="'wdcljsbg' + index">
        <wdcljsbg ref="wdcljsbg" :excel-id="item" :page="index" :syType="form.syType" />
      </div>
      <div v-show="activeVal === 'snhshjl'" v-for="(item, index) in excelTypeMap['snhshjl']" :key="'snhshjl' + index">
        <snhshjl ref="snhshjl" :excel-id="item" :page="index" :syType="form.syType" />
      </div>
      <div v-show="activeVal === 'snhshjlbg'" v-for="(item, index) in excelTypeMap['snhshjlbg']"
        :key="'snhshjlbg' + index">
        <snhshjlbg ref="snhshjlbg" :excel-id="item" :page="index" :syType="form.syType" />
      </div>
      <div v-show="activeVal === 'wdcledtaddbzqx'" v-for="(item, index) in excelTypeMap['wdcledtaddbzqx']"
        :key="'wdcledtaddbzqx' + index">
        <wdcledtaddbzqx ref="wdcledtaddbzqx" :excel-id="item" :page="index" :syType="form.syType" />
      </div>
      <div v-show="activeVal === 'wdcledtaddbzqxbg'" v-for="(item, index) in excelTypeMap['wdcledtaddbzqxbg']"
        :key="'wdcledtaddbzqxbg' + index">
        <wdcledtaddbzqxbg ref="wdcledtaddbzqxbg" :excel-id="item" :page="index" :syType="form.syType">
        </wdcledtaddbzqxbg>
      </div>
      <div v-show="activeVal === 'wdclwcxkyqd'" v-for="(item, index) in excelTypeMap['wdclwcxkyqd']"
        :key="'wdclwcxkyqd' + index">
        <wdclwcxkyqd ref="wdclwcxkyqd" :excel-id="item" :page="index" :syType="form.syType"></wdclwcxkyqd>
      </div>
      <div v-show="activeVal === 'wdclwcxkyqdbg'" v-for="(item, index) in excelTypeMap['wdclwcxkyqdbg']"
        :key="'wdclwcxkyqdbg' + index">
        <wdclwcxkyqdbg ref="wdclwcxkyqdbg" :excel-id="item" :page="index" :syType="form.syType"></wdclwcxkyqdbg>
      </div>
      <div v-show="activeVal === 'wdclycsj'" v-for="(item, index) in excelTypeMap['wdclycsj']"
        :key="'wdclycsj' + index">
        <wdclycsj ref="wdclycsj" :excel-id="item" :page="index" :syType="form.syType"></wdclycsj>
      </div>
      <div v-show="activeVal === 'wdclycsjbg'" v-for="(item, index) in excelTypeMap['wdclycsjbg']"
        :key="'wdclycsjbg' + index">
        <wdclycsjbg ref="wdclycsjbg" :excel-id="item" :page="index" :syType="form.syType"></wdclycsjbg>
      </div>
      <div v-show="activeVal === 'cjlkljpsy'" v-for="(item, index) in excelTypeMap['cjlkljpsy']"
        :key="'cjlkljpsy' + index">
        <cjlkljpsy ref="cjlkljpsy" :excel-id="item" :page="index" :syType="form.syType"></cjlkljpsy>
      </div>
      <div v-show="activeVal === 'cjlkljpbg'" v-for="(item, index) in excelTypeMap['cjlkljpbg']"
        :key="'cjlkljpbg' + index">
        <cjlkljpbg ref="cjlkljpbg" :excel-id="item" :page="index" :syType="form.syType"></cjlkljpbg>
      </div>
      <div v-show="activeVal === 'wdclphbsj'" v-for="(item, index) in excelTypeMap['wdclphbsj']"
        :key="'wdclphbsj' + index">
        <wdclphbsj ref="wdclphbsj" :excel-id="item" :page="index" :syType="form.syType"></wdclphbsj>
      </div>
    </div>
    <backtop-view :sum="activeVal ? excelTypeMap[activeVal].length : 1" @onModPages="onModPages" />

    <statement-select-view ref="statementSelectView" :data-list="tabList" @onShowPreview="onShowPreview" />
    <statement-select-dialog ref="statementSelectDialog" />
  </div>
</template>

<script>
import Bus from "@/utils/bus";
import store from "@/store";
import { emptyConvert } from "@/views/reportForms/utils";
import { getBsDataReport, bsDataReportTb, bsDataReportModPages } from "@/api/syrw/bsDataReport";
import StatementSelectView from "@/views/reportForms/components/StatementSelectView.vue";
import StatementSelectDialog from "@/views/reportForms/components/StatementSelectDialog.vue";
export default {
  name: "index",
  components: {
    TopOperation: () => import("@/views/reportForms/components/topOperation"), // tab页
    BacktopView: () => import("@/views/reportForms/components/backtopView"), // 回到顶部页
    wdclzdgmd: () => import("@/views/reportForms/wjjhl/wdclzdgmd"), //  最大干密度\最佳含水率试验检测记录表
    wdclzdgmdbg: () => import("@/views/reportForms/wjjhl/wdclzdgmdbg"), //  最大干密度\最佳含水率试验检测报告
    wdcljsjc: () => import("@/views/reportForms/wjjhl/wdcljsjc"), //  无机结合料稳定材料击实检测检测记录表
    wdcljsbg: () => import("@/views/reportForms/wjjhl/wdcljsbg"), //  无机结合料稳定材料击实检测报告
    snhshjl: () => import("@/views/reportForms/wjjhl/snhshjl"), //  水泥或石灰剂量试验检测记录表（EDTA滴定法）
    snhshjlbg: () => import("@/views/reportForms/wjjhl/snhshjlbg"), //  水泥或石灰剂量试验检测报告（EDTA滴定法）
    wdcledtaddbzqx: () => import("@/views/reportForms/wjjhl/wdcledtaddbzqx"), //  无机结合料稳定材料EDTA滴定标准曲线试验检测记录表
    wdcledtaddbzqxbg: () => import("@/views/reportForms/wjjhl/wdcledtaddbzqxbg"), //  无机结合料稳定材料EDTA滴定标准曲线试验检测报告
    wdclwcxkyqd: () => import("@/views/reportForms/wjjhl/wdclwcxkyqd"), //  无机结合料稳定材料无侧限抗压强度试验检测记录表
    wdclwcxkyqdbg: () => import("@/views/reportForms/wjjhl/wdclwcxkyqdbg"), //  无机结合料稳定材料无侧限抗压强度试验检测报告
    wdclycsj: () => import("@/views/reportForms/wjjhl/wdclycsj"), //  无机结合料稳定材料延迟时间试验检测记录表
    wdclycsjbg: () => import("@/views/reportForms/wjjhl/wdclycsjbg"), //  无机结合料稳定材料延迟时间试验检测报告
    cjlkljpsy: () => import("@/views/reportForms/wjjhl/cjlkljpsy"), //  粗集料颗粒级配试验检测记录表(水筛法)
    cjlkljpbg: () => import("@/views/reportForms/wjjhl/cjlkljpbg"), //  粗集料颗粒级配试验检测报告
    wdclphbsj: () => import("@/views/reportForms/wjjhl/wdclphbsj"), //  无机结合料稳定材料配合比设计试验检测报告

    StatementSelectView,
    StatementSelectDialog
  },
  data () {
    return {
      reportId: undefined,
      tabList: [],
      form: {
        syType: "",
        excelTypeList: {}
      },
      activeVal: "",
      // key为excelTypeId， value为 excelId数组
      excelTypeMap: {},
      modPagesLodding: false
    };
  },

  created () {
    if (this.$route.query) {
      this.reportId = this.$route.query.reportId;
    }
    this.init();
  },
  mounted () {
    // 填充特殊符号
    Bus.$on("setCharacter", (data) => {
      const { focusInput, page } = store.state.reportForms;
      this.$refs[this.activeVal][page].form[focusInput] = (this.$refs[this.activeVal][page].form[focusInput] || "") + data;
    });
  },
  beforeDestroy () {
    // 停止监听事件
    Bus.$off("setCharacter");
  },
  methods: {
    // 获取记录表和报告表
    async init () {
      if (!this.reportId) {
        this.$message.error("报告id不能为空");
        return;
      }
      const response = await getBsDataReport(this.reportId);
      this.form = response.data;
      if (!this.form.excelTypeList || this.form.excelTypeList.length == 0) {
        this.tabList = [
          {
            val: undefined,
            name: undefined
          }
        ];
        return;
      }
      let tabList = [];
      this.excelTypeMap = {};
      this.form.excelTypeList.forEach((item) => {
        // 是否包含label
        if (this.excelTypeMap.hasOwnProperty(item.label)) {
          this.excelTypeMap[item.label].push(item.excelId);
        } else {
          this.excelTypeMap[item.label] = [item.excelId];
          tabList.push({
            val: item.label,
            name: item.excelTypeName
          });
        }
      });
      this.tabList = tabList;
      this.$set(this.tabList, tabList);
      if (!this.activeVal) {
        this.activeVal = this.tabList[0].val;
      }
      // this.currentActive(this.activeVal)
    },
    currentActive (val) {
      this.activeVal = val;
    },
    // 批量提交
    async reportFormsSubmit (hasTips = true) {
      let arr = [];
      this.tabList.forEach((item) => {
        const refList = this.excelTypeMap[item.val];
        if (!refList || refList.length <= 0) {
          return;
        }
        refList.forEach((element, index) => {
          if (this.$refs[item.val] && this.$refs[item.val][index]) {
            let info = this.$refs[item.val][index].submitForm();
            arr.push({ label: item.val, excelObj: emptyConvert(JSON.parse(JSON.stringify(info))) });
          }
        });
      });
      await bsDataReportTb(arr);
      if (hasTips) {
        this.$modal.msgSuccess("操作成功");
      };
    },
    // 加一页减一页
    async onModPages (modType) {
      this.modPagesLodding = true;
      // 1先保存
      await this.reportFormsSubmit();
      // 2 加减页
      await this.doModPages(modType);
      // 3 重新加载
      await this.init();
      // 4 刷新
      this.tabList.forEach((item) => {
        const refList = this.excelTypeMap[item.val];
        if (!refList || refList.length <= 0) {
          return;
        }
        refList.forEach((element, index) => {
          if (this.$refs[item.val] && this.$refs[item.val][index]) {
            this.$refs[item.val][index].getInfo();
          }
        });
      });
      this.modPagesLodding = false;
    },
    // 加减页
    async doModPages (modType) {
      const arr = this.excelTypeMap[this.activeVal];
      const data = {
        reportId: this.reportId,
        label: this.activeVal,
        modType: modType,
        excelId: Number(modType) < 0 ? arr[arr.length - 1] : undefined,
        vo: Number(modType) < 0 ? undefined : this.$refs[this.activeVal][arr.length - 1].submitForm()
      };
      await bsDataReportModPages(data);
    },
    // 选择报表
    onPrintSpecificPart () {
      this.$refs.statementSelectView.init();
    },
    //预览
    onShowPreview (tableList) {
      if (!tableList || tableList.length <= 0) {
        return;
      }
      let arr = [];
      this.form.excelTypeList.forEach((item) => {
        if (tableList.includes(item.label)) {
          arr.push({ label: item.label, excelId: item.excelId, syType: this.form.syType });
        }
      });
      this.$refs.statementSelectDialog.init(arr);
    }
  }
};
</script>

<style scoped></style>
